<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>广播式WebSocket</title>
    <script th:src="@{/webjars/jquery/3.2.1/jquery.min.js}"></script>
    <script th:src="@{../static/js/sockjs.min.js}"></script>
    <script th:src="@{../static/js/stomp.js}"></script>
    <link th:href="@{../static/lib/messagepop/bootstrap.min.css}"  rel="stylesheet" type="text/css">
    <link th:href="@{../static/lib/messagepop/dm-notif-style.css}" rel="stylesheet" type="text/css">
    <script th:src="@{../static/lib/messagepop/dm_notify.js}"></script>
    <script type="text/javascript">
        var stompClient = null;

        function setConnected(connected) {
            document.getElementById("connect").disabled = connected;
            document.getElementById("disconnect").disabled = !connected;
            document.getElementById("conversationDiv").style.visibility = connected ? 'visible' : 'hidden';
//        $("#connect").disabled = connected;
//        $("#disconnect").disabled = !connected;
            $("#response").html();
        }

        function connect() {
            var socket = new SockJS('/endpointSang');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
                setConnected(true);
                console.log('Connected:' + frame);
                stompClient.subscribe('/topic/getResponse', function (response) {
                    showResponse(JSON.parse(response.body).responseMessage);
                })
            });
        }

        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            setConnected(false);
            console.log('Disconnected');
        }

        function sendName() {
            var name = $('#name').val();
            console.log('name:' + name);
            stompClient.send("/welcome", {}, JSON.stringify({'name': name}));
        }

        function showResponse(message) {
            $("#response").html(message);
        }

        window.onload = function () {
            disconnect();
        };

        $('#blue').on('click', function () {
            dm_notification('Aliquam erat volutpat. Cras sit amet condimentum risus. ', 'blue', 4000)
        });
    </script>
</head>
<body>
<noscript><h2 style="color: #e80b0a;">Sorry，浏览器不支持WebSocket</h2></noscript>
<div>
    <div>
        <button id="connect" onclick="connect();">连接</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
    </div>

    <div id="conversationDiv">
        <label>输入你的名字</label><input type="text" id="name"/>
        <button id="sendName" onclick="sendName();">发送</button>
        <p id="response"></p>
    </div>
</div>
<a class="btn btn-info" id="blue"><span>Info Message</span></a>
<div id="dm-notif"></div>
</body>
</html>